<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06 步骤练习</title>

    <style>
        ul{
            list-style: none;
            padding:0;
            width: 500px;
            margin:100px auto;
        }

        li{
            padding-left: 50px;
            position: relative;
            padding-top: 20px;
        }

        li::before{
            content: "";
            position: absolute;
            top:35px;
            left: 0;
            width: 5px;
            height: 100%;
            background-color: #369;
        }

        li>span{
            position: absolute;
            left: -8px;
            top:25px;
            width:20px;
            height:20px;
            text-align: center;
            line-height:20px;
            color: white;
            background-color: #ff705e;
            border-radius: 50%;
        }


        li:last-child::before{
            content: "";
            background-color: transparent;
        }

        li>div{
            border: 1px solid #737373;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <ul>
        <li><span>1</span><div style="height: 60px">1</div></li>
        <li><span>2</span><div style="height: 80px">2</div></li>
        <li><span>3</span><div style="height: 100px">3</div></li>
        <li><span>4</span><div style="height: 200px">4</div></li>
        <li><span>5</span><div style="height: 200px">5</div></li>
    </ul>
</body>
</html>